<template>
  <div class="website">
    <div
      class="website-wrapper"
      v-for="item in props.resourceWebSiteData"
      :key="item.id"
    >
      <div class="website-title">
        <el-image
          :src="item.icon"
          style="width: 27px; height: 27px; margin-right: 10px; cursor: pointer"
        ></el-image>
        {{ item.categryName }}
      </div>
      <ul class="website-list">
        <li
          v-for="webSite in item.resourceInfoList"
          :key="webSite.id"
          @click="beatToResource(webSite.resourceUrl)"
        >
          <el-tooltip :content="webSite.resourceDesc">
            <div
              class="list-container"
              style="width: 100%; height: 100%; display: flex"
            >
              <div class="weisite-image">
                <el-image
                  style="width: 40px; height: 40px; border-radius: 50%"
                  :src="webSite.resourceImage"
                  :fit="cover"
                />
              </div>

              <div class="website-desc">
                <div class="name">{{ webSite.resourceName }}</div>
                <div class="desc">
                  {{ webSite.resourceDesc }}
                </div>
              </div>
            </div>
          </el-tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(["resourceWebSiteData"]);

const beatToResource = (url) => {
  // location.href = url;
  window.open(url);
};
</script>

<style scoped lang="scss">
.website {
  width: 100%;
  height: auto;
  padding: 10px;
  background-color: #f2f2f2 !important;
  .website-wrapper {
    width: 100%;
    height: auto;
    .website-title {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      color: #404040;
      font-size: 1.2em;
      font-family: "微软雅黑";
      margin-top: 20px;
    }
    .website-list {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 22%;
        height: 60px;
        margin-right: 1%;
        margin-top: 20px;
        cursor: pointer;
        border-radius: 10px;
        padding: 10px;
        transition: all 0.4s;
        background-color: #ffffff;
        .weisite-image {
          width: 25%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .website-desc {
          width: 75%;
          height: 100%;
          padding: 5px 0;
          box-sizing: border-box;
          .name {
            width: 100%;
            height: 40%;
            font-size: 14px;
            font-weight: 600;
          }
          .desc {
            width: 100%;
            height: 60%;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      li:hover {
        box-shadow: 0 0 5px #cacaca;
        transform: translateY(-8px);
      }
    }
  }
}
</style>